import React from 'react'
import { connect } from 'dva'
import { Row,Col,Icon } from 'antd'

/**
 * TradeYieldCharts 交易收益率分布图
 */
import {IECharts} from '../../../components'
import { colors } from '../../../utils'
const TradeYieldCharts = ({ 
    data 
   }) => {
    const myProps = {
      option: {
        tooltip: {
          trigger: 'axis',
          axisPointer: {            // 坐标轴指示器，坐标轴触发有效
            type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        grid: {
          top:'10%',
          left: '3%',
          right: '3%',
          bottom: '10%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            name:'收益率分布区间(千分比)',
            axisLine:{
              symbol:['none','arrow']
            },
            nameGap:5,
            nameRotate:90,
            data: data.map(item => item.interval)
          }
        ],
        yAxis: [
          {
            type: 'value',
            name:'交易次数',
            axisLine:{
              symbol:['none','arrow']
            }
          }
        ],
        series: [
          {
            type: 'bar',
            itemStyle: {
              normal: {
                color: (params) => {
                  const thisIndex = data.findIndex(item => item.interval === params.name)
                  return colors[thisIndex]
                },
              },
            },
            data: data.map(item => item.times)
          }
        ]
      }
    }
      return (
        // <div style={{ height: 300 }} >
        <div style={{ height: 428 }} >
          <IECharts {...myProps} resizable={true} />
        </div>
      )
   }

   
/**
 * [TradeYield 交易收益分布]
 * 引用组件 
 * TradeYieldCharts 交易收益率分布图
 */
import DefinitionList from '../../../components/DefinitionList'
class TradeYield extends React.Component {
  state={
    data:this.props.tradingYieldDistribution
  }

  componentDidMount() {
    this.fetchData(this.props)
  }
  componentWillReceiveProps(nextProps) {
    if((nextProps.begindate!==this.props.begindate)||(nextProps.enddate!==this.props.enddate)||(nextProps.trader!==this.props.trader)){
      this.fetchData(nextProps)
    }
    if(nextProps.tradingYieldDistribution!==this.props.tradingYieldDistribution){
      this.setState({
        data:nextProps.tradingYieldDistribution
      })
    }
  }
  fetchData=(props)=>{
    this.props.dispatch({
      type: `dailyReplay/getTradingYieldDistribution`,
      payload:props
    })
  }
  render() {
    const { data } = this.state
    
    return (
      <Row type="flex" justify="space-around" align="middle">
          <Col xs={18} sm={18} md={18} lg={18} xl={18}>
            <TradeYieldCharts data={data} />
          </Col>
          <Col xs={6} sm={6} md={6} lg={6} xl={6} className='chartsLegend'>
            {
              data && data.map((item, index) => (
                <DefinitionList
                  key={index}
                  icon={<Icon type="caret-right" style={{ color: colors[index] }} />}
                  name={`${item.interval}:`}
                  value={item.times}
                />
              ))
            }
          </Col>
        </Row>
    )
  }
}

TradeYield.defaultProps={
  begindate: null,
  enddate: null,
  trader: 'total',
  tradingYieldDistribution:[]
}

export default connect()(TradeYield)
